
    <div id="fixed-app" class="fixed-app">
       
        <div class="fixed-bar">
       @if($presales_whatsapp_number!='')
            <div class="tool-bar">
                <a  href="https://api.whatsapp.com/send?phone={{ $presales_whatsapp_number }}" target="_blank"> 
                    <div class="img"><img src={{ plugin_asset('Supportforwhatsapp', 'image/whatsapp.png') }} alt=""></div>
                    <div class="notify" style="display: none;"></div>
                    <div class="desc">{{ $presales_whatsapp_number_lable }}</div>
                </a>
            </div>
        @endif
        @if($aftermarket_whatsapp_number!='')
            <div class="tool-bar">
                <a  href="https://api.whatsapp.com/send?phone={{ $aftermarket_whatsapp_number }}" target="_blank"> 
                    <div class="img"><img src={{ plugin_asset('Supportforwhatsapp', 'image/whatsapp.png') }} alt=""></div>
                    <div class="notify" style="display: none;"></div>
                    <div class="desc">{{ $aftermarket_whatsapp_number_lable }}</div>
                </a>
            </div>
        @endif
            <div id="scroll-top" onclick="window.scrollTo({top:0,behavior:'smooth'})"
                class="tool-bar d-md-block show-transition" style="display: none;">
                <div class="img"><i class="bi bi-chevron-up" style="color: #71c20b; size:26px;"></i></div>
                <div class="desc">Top</div>
            </div>
        </div>
    </div>

    <style>


        /*右侧悬浮bar*/
        .fixed-app .fixed-bar {
            display: flex;
            flex-direction: column;
            position: fixed;
            right: 0;
            bottom: 1.25rem;
            background: #fff;
            box-shadow: 0 0 .75rem 0 rgba(0, 0, 0, .1);
            border-radius: .625rem 0 0 .625rem;
            z-index: 41;           
            opacity: 0.9;
            min-width: 60px;
            max-width: 65px;
            @media (max-width: 576px) {
                bottom: 6.25rem;   
            }
        }

        .fixed-bar .hidden-transition {
            height: 0;
            opacity: 0;
            transition: height .2s, opacity .1s;
            position: relative;
            width: 100%;
        }
        .fixed-bar .show-transition {
            height: 3.5rem;
            opacity: 1;
            transition: height .1s, opacity .2s;
            position: relative;
            width: 100%;
        }
        .fixed-bar .tool-bar {
            flex-direction: column;
            display: flex;
            width: 100%;
            text-align: center;
            padding-top: .32rem;
            cursor: pointer;
        }
        .tool-bar .notify {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%;
            right: 19px;
        }
        .tool-bar .img i {
            width: 2rem;
            height: 2rem;
        }
        .tool-bar .desc {
            padding-top: .32rem;
            transform: scale(0.8);
            color: #000;
            text-align: center; /* 文本居中 */
            word-wrap: break-word; /* 自动折行 */
            word-break: break-all; /* 允许在任意字符间断行 */
        }

        .tool-bar a{
            text-decoration: none;
        }
        .tool-bar a .notify {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%;
            right: 19px;
        }
        .tool-bar a .img img {
            width: 1.8rem;
            height: 1.8rem;
        }
        .tool-bar a .desc {
            padding-top: .32rem;
            transform: scale(0.8);
            color: #000;
            text-align: center; /* 文本居中 */
            word-wrap: break-word; /* 自动折行 */
            word-break: break-all; /* 允许在任意字符间断行 */
        }


    </style>
    <script>
      $(function () {
        const targetElement = document.getElementById('scroll-top');
        window.addEventListener('scroll', function () {
          const scrollDistance = window.scrollY;
          // 根据滚动距离，切换显示和隐藏状态
          targetElement.classList.toggle("hidden-transition", scrollDistance <= 255);
          targetElement.classList.toggle("show-transition", scrollDistance > 255);
        });
      });


    // 确保DOM加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
    const fixedBars = document.querySelectorAll('.fixed-app .fixed-bar');
    const productBtns = document.querySelector('.product-btns');
    // const checkoutBtns = document.querySelector('.submit-checkout-wrap');
    const checkoutBtns = document.querySelector('.submit-checkout-wrap') || document.querySelector('.cart-mb-total');

    function isElementFixedAtBottom(element) {
        if (!element) return false;
        const style = window.getComputedStyle(element);
        return style.position === 'fixed' && 
            parseInt(style.bottom, 10) === 0 && 
            style.top !== '0px';
    }

    function adjustFixedBarPosition() {
        let bottomElement = productBtns || checkoutBtns;
        
        if (bottomElement && isElementFixedAtBottom(bottomElement)) {
        const bottomElementRect = bottomElement.getBoundingClientRect();
        fixedBars.forEach(fixedBar => {
            fixedBar.style.top = 'auto';
            fixedBar.style.bottom = `${bottomElementRect.height + 10}px`;
        });
        } else {
        fixedBars.forEach(fixedBar => {
            fixedBar.style.bottom = '1.25rem';
            fixedBar.style.top = 'auto';
        });
        }
    }

    // 初始调整和事件监听
    adjustFixedBarPosition();
    window.addEventListener('resize', adjustFixedBarPosition);
    window.addEventListener('scroll', adjustFixedBarPosition);
    });

    
    
    </script>



